import React, { useRef, useEffect } from 'react'
import Form, { Input, Select } from './index.js'

const FormItem = Form.FormItem
const Option = Select.Option

function Index() {
	const form = useRef(null)

	const handleClick = () => {
		form.current.submit((res) => {
			console.log('res :>>', res)
		})
	}

	const handleGetValue = () => {
		console.log('handleGetValue :>>', form.current.getFieldsValue())
	}
	return (
		<div style={{ marginTop: '50px' }}>
			<Form ref={form} initialValue={{ author: '王冰冰' }}>
				<FormItem
					label="请输入名字"
					labelWidth={150}
					name="name"
					required
					rules={{
						rule: /^[a-zA-Z0-9]{4,32}$/,
						message: '名称仅支持英文字母，数字，长度限制4-32个字符',
					}}
					validateTrigger="onBlur"
				>
					<Input placeholder="名字" />
				</FormItem>
				<FormItem
					label="手机"
					labelWidth={150}
					name="phone"
					required
					rules={{
						rule: /^1[3-9]\d{9}$/,
						message: '手机格式错误',
					}}
					validateTrigger="onBlur"
				>
					<Input placeholder="请输入手机" />
				</FormItem>
				<FormItem
					label="简介"
					labelWidth={150}
					name="des"
					rules={{
						rule: (value = '') => value?.length < 5,
						message: '简介内容不操作5个字符',
					}}
					validateTrigger="onBlur"
				>
					<Input placeholder="请输入简介" />
				</FormItem>
				<FormItem
					label="你最喜欢的前端框架"
					labelWidth={150}
					name="likes"
					required
				>
					<Select placeholder="请选择" width={120}>
						<Option value={1}>React.js</Option>
						<Option value={2}>Vue.js</Option>
						<Option value={3}>Angular.js</Option>
					</Select>
				</FormItem>
				<div>
					<button onClick={handleClick} type="button">
						提交
					</button>
					<button type="reset">重置</button>
				</div>
			</Form>
			<div style={{ marginTop: '20px' }}>
				<span>表单验证功能</span>
				<button
					onClick={handleGetValue}
					style={{ backgroundColor: 'green' }}
				>
					获取表单数据
				</button>
				<button
					onClick={() => {
						form.current.validateFields((res) => {
							console.log('是否提供验证 :>>', res)
						})
					}}
					style={{ backgroundColor: 'orange' }}
				>
					动态验证表单
				</button>
				<button
					onClick={() => {
						form.current.setFieldsValue('des', {
							rule: (value = '') => value?.length < 10,
							message: '简介不超过10个字符',
						})
					}}
					style={{ backgroundColor: 'purple' }}
				>
					动态设置校验规则
				</button>
			</div>
		</div>
	)
}

export default Index
